<template>
  <view>
    <view
      class="q-switch-box"
      :style="{
        backgroundColor:
          modelValue == activeValue ? activeBgColor : inActiveBgColor,
        width: width,
        height: height,
        borderRadius: `calc(${height} / 2)`,
      }"
      @click.stop="changeSwitch"
    >
      <view
        v-if="modelValue == inactiveValue"
        class="before"
        :style="{
          right: `calc(${margin} * 2)`,
          fontSize: fontSize,
        }"
        ><block v-if="inShowText">{{ inShowText }}</block></view
      >
      <!-- 圆圈 -->
      <view
        class="circle-inner"
        :style="{
          margin: margin,
          width: circleRadius,
          height: circleRadius,
          backgroundColor: '#ffffff',
          ...switchAnimation,
        }"
      >
      </view>
      <view
        v-if="modelValue == activeValue"
        class="after"
        :style="{
          left: `calc(${margin} * 2)`,
          fontSize: fontSize,
        }"
      >
        <block v-if="showText">{{ showText }}</block>
      </view>
    </view>
  </view>
</template>
<!-- 自定义Switch:自定义左右内容 -->
<script setup>
import { computed } from 'vue';

const props = defineProps({
  height: {
    type: String,
    default: '38rpx',
  },
  width: {
    type: String,
    default: '84rpx',
  },
  margin: {
    type: String,
    default: '4rpx',
  },
  fontSize: {
    type: String,
    default: '18rpx',
  },
  // 激活背景色
  activeBgColor: {
    type: String,
    default: '#0A5903',
  },
  // 未激活背景色
  inActiveBgColor: {
    type: String,
    default: '#EDEDED',
  },
  // 激活文本
  showText: {
    type: String,
    default: '',
  },
  // 未激活文本
  inShowText: {
    type: String,
    default: '',
  },
  // v-modal
  modelValue: {
    type: Boolean || Number || String,
    default: false,
  },
  inactiveValue: {
    type: Boolean || Number || String,
    default: false,
  },
  activeValue: {
    type: Boolean || Number || String,
    default: true,
  },
});

// watch(
//   () => props.modelValue,
//   () => {
//   }
// );

const emits = defineEmits(['update:modelValue', 'change']);
// 修改switch值
function changeSwitch() {
  const currentVal =
    props.modelValue == props.activeValue
      ? props.inactiveValue
      : props.activeValue;
  emits('update:modelValue', currentVal);
  emits('change', currentVal);
}
// 圆圈半径
const circleRadius = computed(() => {
  return `calc(((${props.height} / 2) - ${props.margin})* 2)`;
});
// 动画效果
const switchAnimation = computed(() => {
  const obj = {
    transition: "transform 0.3s",
    transform: 'translateX(0)',
  };
  // 激活
  if (props.modelValue == props.activeValue) {
    const innerRadius = `((${props.height} / 2) - ${props.margin})`; // 圆圈半径
    const moveValue = `calc(${props.width} - ${props.margin} * 2 - (${innerRadius} * 2))`; // 偏移距离 总宽度 - 圆圈左右边距 - 圆圈宽度
    obj.transform = `translateX(${moveValue})`;
  } else {
    // 未激活
    obj.transform = "translateX(0)";
  }
  return obj;
});
</script>
<style lang="scss" scoped>
.q-switch-box {
  display: flex;
  background-color: #eaeaea;
  position: relative;
  height: 100%;
  .circle-inner {
    border-radius: 50%;
  }
  .before {
    position: absolute;
    color: #bbbbbb;
    display: flex;
    height: 100%;
    align-items: center;
  }
  .after {
    position: absolute;
    color: #ffffff;
    display: flex;
    height: 100%;
    align-items: center;
  }
}
</style>
